<template>
  <el-dialog class="edit-password" title="修改密码" append-to-body :close-on-click-modal="closeOnclickModal"
    :visible.sync="isDialogShow" @close="close">
    <!--表格-->
    <el-form :model="dialogForm" ref="dialogForm" :size="size" label-width="120px">
      <el-form-item label="账号">
        {{userInfo.userKey}}
      </el-form-item>
      <el-form-item label="姓名">
        {{userInfo.realName}}
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        {{dialogForm.phone}}
      </el-form-item>
      <el-form-item :rules="passWordRule" label="新密码" prop="password">
        <el-input v-model="dialogForm.password" placeholder="请输入新密码" clearable />
      </el-form-item>
      <el-form-item label="确认密码" :rules="confirmPassWordRule" prop="confirmPassWord">
        <el-input v-model="dialogForm.confirmPassWord" placeholder="请再次输入新密码" clearable />
      </el-form-item>
      <el-form-item class="img-code" label="短信验证码" prop="validateCode"
        :rules="rf_rules({required:true})">
        <el-input v-model="dialogForm.validateCode" placeholder="请输入短信验证码" name="validateCode"></el-input>
        <el-button style="margin-left: 5px;" type="primary" @click="sendMessage('resetMessage')"
          :disabled="resetMessage.type === 1">
          {{resetMessage.text}}</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close" :size="size">取消</el-button>
      <el-button type="primary" @click="submit" :size="size">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'EditPasswordModal',
    props: {
      dialogShow: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal', 'userInfo'])
    },
    data () {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.dialogForm.confirmPassWord !== '') {
            this.$refs.dialogForm.validateField('confirmPassWord')
          }
          callback()
        }
      }
      const validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.dialogForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        isDialogShow: false,
        dialogForm: {
          phone: '',
          validateCode: null,
          password: '',
          confirmPassWord: ''
        },
        confirmPassWordRule: {
          required: true,
          validator: validatePass2,
          trigger: 'blur'
        },
        passWordRule: {
          required: true,
          validator: validatePass,
          trigger: 'blur'
        },
        resetMessage: {
          type: 0,
          text: '验证码'
        }
      }
    },
    watch: {
      dialogShow (newValue) {
        this.isDialogShow = newValue
        this.dialogForm.phone = this.userInfo.phone
      }
    },
    mounted() {

    },
    methods: {
      submit () {
        const params = this.dialogForm
        api.resetPassword(params).then(res => {
          this.$message.success('修改密码成功')
          this.close()
        })
      },
      close () {
        this.$refs['dialogForm'].resetFields()
        this.$emit('update:dialogShow', false)
      },
      // 发送短信验证码
      sendMessage (messageObj) {
        if (this[messageObj].type === 0) {
          this.ajaxMessage(messageObj).then(() => {
            this[messageObj].type = 1
            this.countDown(60, messageObj)
          })
        } else if (this[messageObj].type === 1) {
          return
        } else {
          this.ajaxMessage(messageObj).then(() => {
            this[messageObj].type = 1
            this.countDown(60, messageObj)
          })
        }
      },
      // 发送短信接口
      ajaxMessage (messageObj) {
        return new Promise((resolve, reject) => {
          let params = {}
          params.phone = this.userInfo.phone
          if (!/^1(3[0-9]|4[56789]|5[012356789]|6[6]|7[135678]|8[0-9]|9[89])\d{8}$/.test(params.phone)) {
            this.$message.warning('请填写正确的手机号')
            return
          }
          resolve()
          params.bizCode = 'reset'
          api.sendSms(params).then(res => {
            this.$message.success('发送成功')
            this.dialogForm.randomId = res.data
          })
        })
      },
      countDown (seconds, messageObj) {
        this[messageObj].text = seconds + 'S'
        if (seconds > 0) {
          this[messageObj].countdownTimeout = setTimeout(() => {
            this.countDown(seconds - 1, messageObj)
          }, 1000)
        } else {
          clearTimeout(this.countdownTimeout)
          this[messageObj].type = 2
          this[messageObj].text = '重新发送'
        }
      }
    }
  }
</script>
<style lang="scss">
  .edit-password {
    .el-dialog {
      width: 28%;
      min-width: 450px;
    }

    .img-code {
      .el-form-item__content {
        display: flex;
        align-items: center;

        .el-input {
          width: auto;
          flex: 1;
        }

        img {
          display: block;
          margin-left: 5px;
        }
      }
    }
  }
</style>
